<template>
    <span>
        <el-popover placement="left-end" title="选择凭证" trigger="click">
            <el-row class="res-selector">
                <el-col :span="12">
                    <el-tree
                        :data="evidenClasses"
                        :props="{ value: 'id', label: 'name', children: 'subClasses' }"
                        @node-click="selectClass"
                    ></el-tree>
                </el-col>
                <el-col :span="12">
                    <el-tooltip
                        v-for="evi in evidences"
                        :key="evi.id"
                        placement="right"
                        :content="evi.name"
                    >
                        <img
                            :src="`/api${evi.desktopIconImageUrl}`"
                            @click="setEvidenceId(evi)"
                            width="100%"
                        >
                    </el-tooltip>
                </el-col>
            </el-row>
            <el-button slot="reference">
                <img v-if="evidence" :src="`/api${evidence.desktopIconImageUrl}`" width="100%">
                <div v-if="!evidence">选择凭证</div>
            </el-button>
        </el-popover>
        <el-select
            placeholder="选择凭证用途"
            clearable
            :value="content && content.action"
            @change="setEvidenceAction"
        >
            <el-option
                v-for="action in eviActions"
                :key="action.value"
                :label="action.label"
                :value="action.value"
            ></el-option>
        </el-select>
    </span>
</template>
<script>
import Vue from 'vue'
import { mapState, mapGetters, mapActions, mapMutations } from 'vuex'
import { eviActions } from '../data/consts'

export default {
    name: 'evi-selector',
    props: ['content'],
    data() {
        return { eviActions, evidence: null }
    },
    mounted() {
        this.getEvi()
        this.getEvidenceClasses()
        this.getEvidences()
    },
    watch: {
        content() {
            this.getEvi()
        },
        deep: true
    },
    computed: {
        ...mapGetters(['evidenClasses', 'evidences'])
    },
    methods: {
        ...mapActions(['getEvidenceClasses', 'getEvidences', 'getEvidence']),
        ...mapMutations(['setEvidenPage']),
        getEvi() {
            if (this.content) {
                this.getEvidence({
                    id: this.content.id,
                    cb: evidence => (this.evidence = evidence)
                })
            }
        },
        selectClass(node) {
            const { id, classParentId } = node
            const classIds = []
            if (classParentId) {
                classIds.push(classParentId)
            }
            classIds.push(id)
            this.setEvidenPage({
                number: 1,
                size: null,
                filter: {
                    enabled: true,
                    classIds
                }
            })
            this.getEvidences()
        },
        setEvidenceId(evidence) {
            this.evidence = evidence
            const { id } = evidence
            const content = { ...this.content, id }
            this.$emit('change', content)
        },
        setEvidenceAction(action) {
            const content = { ...this.content, action }
            this.$emit('change', content)
        }
    }
}
</script>
<style lang="less">
.res-selector {
    width: 400px;
    min-height: 400px;
    max-height: 50vh;
    overflow-y: hidden;
    .el-col {
        overflow-y: scroll;
        min-height: 400px;
        max-height: 50vh;
    }
}
</style>


